//! Table Parser for vector table on the Web
//! Author: Fengyuan(Franklin) Zhang
//! Date: 2019-8-16

var TableParser = function(){
    this._url = '';
    this._baseElement = null;
    this._table = null;
    this._meta = [];
    this._features = [];
    this._structs = [];
    this._legends = [];
    this._contents = [];
    this._metaTB = null;
    this._featureTB = null;
    this._structTB = null;
    this._legendTB = null;
    this._contentTB = null;
    this._type = 'MIX';
};

TableParser.prototype.init = function(url, ele, type = 'MIX'){
    window.tableParse = this;
    this._url = url;
    if (ele.length > 0){
        this._baseElement = ele[0];
        this._baseElement.innerHTML = ''
    }
    else{
        return;
    }
    this._type = type;

    this._meta = [];

    //! Add meta data
    this._meta.push(['来源', url]);

    var typeName = '交叉表(MIX)';
    if(type == 'COL'){
        typeName = '列表(COL)';
    }
    if(type == 'ROW'){
        typeName = '行表(ROW)';
    }

    this._meta.push(['类型', typeName]);

    $.ajax({
        url : this._url,
        success : function(response){
            this.parseHTML(response);
            this.makeupTable();

        }.bind(this)
    });
};

TableParser.prototype.parseHTML = function(htmlText){
    var parser = new DOMParser();
    var htmlDoc = parser.parseFromString(htmlText, "text/html");

    this._structs = [];
    this._legends = [];
    this._contents = [];
    this._features = [];

    var title = htmlDoc.getElementsByTagName('title')[0];
    var titleText = title.innerText;

    this._meta.push(['标题', titleText]);

    this._features.push(['时间', '']);
    this._features.push(['地点', '']);
    this._features.push(['人物', '']);
    this._features.push(['事件', '']);
    this._features.push(['事物', '']);
    this._features.push(['现象', '']);
    this._features.push(['场景  ', '']);

    var tables = htmlDoc.getElementsByTagName('table');
    if(tables.length > 0){
        this._table = tables[0];
    }
    else{
        return;
    }

    this._table.style.border = '#000000 1px solid';
    var trs = this._table.getElementsByTagName('tr');
    
    for(var i = 0; i < trs.length; i++){
        var td_hColl = trs[i].children;
        if (i == 0 && this._type == 'COL'){
            for (var j = 0; j < td_hColl.length; j++){
                this._structs.push('Struct_' + j);
            }
        }
        if (i == 0 && this._type != 'COL'){
            for (var j = 0; j < td_hColl.length; j++){
                this._structs.push(td_hColl[j].innerText)
                td_hColl[j].style.border = '#000000 1px solid';
                td_hColl[j].rowIndex = i;
            }
        }
        else{
            var currentLegend = '';
            for (var j = 0; j < td_hColl.length; j++){
                if (j == 0 && this._type == 'ROW'){
                    currentLegend = 'Legend_' + i;
                    this._legends.push('Legend_' + i);
                }
                if (j == 0 && this._type != 'ROW'){
                    this._legends.push(td_hColl[j].innerText);
                    currentLegend = td_hColl[j].innerText;
                    td_hColl[j].style.border = '#000000 1px solid';
                }
                else{
                    td_hColl[j].struct = this._structs[j];
                    td_hColl[j].legend = currentLegend;
                    td_hColl[j].onclick = this.onRawTBclick.bind(this);
                    this._contents.push({
                        struct : this._structs[j],
                        legend : currentLegend,
                        colIndex : j,
                        rowIndex : i,
                        value : td_hColl[j].innerText
                    });
                    td_hColl[j].style.border = '#000000 1px solid';
                }
            }
        }
    }

    this._meta.push(['行数', i]);
    this._meta.push(['列数', j]);
}

TableParser.prototype.makeupTable = function(){
    this._baseElement.innerHTML = '';

    var container_div = document.createElement('div');
    container_div.className = 'col-md-6';
    container_div.style.minHeight = '800px';
    container_div.style.maxHeight = '800px';

    var table_div = document.createElement('div');
    table_div.className = 'col-md-12';
    table_div.style.backgroundColor = '#eeeeee';
    table_div.style.minHeight = '500px';
    table_div.style.maxHeight = '500px';
    table_div.style.borderStyle = 'solid'
    table_div.style.borderWidth = '1px'
    table_div.style.overflowX = 'scroll';
    table_div.style.overflowY = 'scroll';
    table_div.append(this._table);
    container_div.append(table_div);

    var info = document.createElement('div');
    info.className = 'col-md-6';
    info.style.maxHeight = '800px';
    info.style.minHeight = '800px';
    info.style.borderStyle = 'solid'
    info.style.borderWidth = '1px'
    info.style.overflowX = 'hidden';
    info.style.overflowY = 'scroll';

    var infoTitle = document.createElement('h3');
    infoTitle.innerText = "解构信息";
    info.append(infoTitle);

    var meta_div = document.createElement('div');
    meta_div.className = 'col-md-12';
    meta_div.style.maxHeight = '300px';
    meta_div.style.minHeight = '300px';
    meta_div.style.overflowX = 'scroll';
    meta_div.style.overflowY = 'scroll';
    meta_div.style.borderStyle = 'solid'
    meta_div.style.borderWidth = '1px'

    var metaTitle = document.createElement('h3');
    metaTitle.innerText = "元数据";
    meta_div.append(metaTitle);

    var tabCtrl = document.createElement('ul');
    tabCtrl.className = 'nav nav-tabs nav-justified';


    // var li_mt = document.createElement('li');
    // li_mt.className = 'active';
    // li_mt.tbType = 'mt';
    // li_mt.onclick = this.showInfoTable.bind(this);
    // li_mt.innerHTML = '<a href="#">元数据</a>';
    // tabCtrl.append(li_mt);

    // var li_f = document.createElement('li');
    // li_f.tbType = 'f';
    // li_f.onclick = this.showInfoTable.bind(this);
    // li_f.innerHTML = '<a href="#">要素</a>';
    // li_f.className = 'active';
    // tabCtrl.append(li_f);

    var li_stct = document.createElement('li');
    li_stct.tbType = 'stct';
    li_stct.onclick = this.showInfoTable.bind(this);
    li_stct.innerHTML = '<a href="#">结构</a>';
    li_stct.className = 'active';
    tabCtrl.append(li_stct);

    var li_lgd = document.createElement('li');
    li_lgd.tbType = 'lgd';
    li_lgd.onclick = this.showInfoTable.bind(this);
    li_lgd.innerHTML = '<a href="#">图例</a>';
    tabCtrl.append(li_lgd);

    var li_ctnt = document.createElement('li');
    li_ctnt.tbType = 'ctnt';
    li_ctnt.onclick = this.showInfoTable.bind(this);
    li_ctnt.innerHTML = '<a href="#">内容</a>';
    tabCtrl.append(li_ctnt);

    info.append(tabCtrl);

    //! Meta data table
    var metaTB = document.createElement('table');
    metaTB.className = 'table table-hover';
    var tbody = document.createElement('tbody');
    metaTB.append(tbody);

    var head = document.createElement('tr');
    head.append(TableParser.createTH("字段"));
    head.append(TableParser.createTH("值"));
    tbody.append(head);
    
    for(var i = 0; i < this._meta.length; i++){
        var tr = document.createElement('tr');
        tr.append(TableParser.createTD(this._meta[i][0]));
        tr.append(TableParser.createTD(this._meta[i][1]));
        tbody.append(tr);
    }

    this._metaTB = metaTB;

    meta_div.append(this._metaTB);
    container_div.append(meta_div);
    this._baseElement.append(container_div);

    //! Feature table
    var featureTB = document.createElement('table');
    featureTB.className = 'table table-hover';
    var tbody = document.createElement('tbody');
    featureTB.append(tbody);

    var head = document.createElement('tr');
    head.append(TableParser.createTH("#"));
    head.append(TableParser.createTH("要素"));
    head.append(TableParser.createTH("值"));
    tbody.append(head);
    
    for(var i = 0; i < this._features.length; i++){
        var tr = document.createElement('tr');
        tr.append(TableParser.createTD(i));
        tr.append(TableParser.createTD(this._features[i][0]));
        tr.append(TableParser.createTD(this._features[i][1]));
        tbody.append(tr);
    }

    this._featureTB = featureTB;

    info.append(this._featureTB);

    //! Struct table
    var structTable = document.createElement('table');
    structTable.className = 'table table-hover';
    var tbody = document.createElement('tbody');
    structTable.append(tbody);

    var head = document.createElement('tr');
    head.append(TableParser.createTH("#"));
    head.append(TableParser.createTH("结构"));
    tbody.append(head);
    
    for(var i = 0; i < this._structs.length; i++){
        var tr = document.createElement('tr');
        tr.append(TableParser.createTD(i));
        tr.append(TableParser.createTD(this._structs[i]));
        tbody.append(tr);
    }

    this._structTB = structTable;

    info.append(structTable);

    //! Legend table
    var legendTable = document.createElement('table');
    legendTable.className = 'table table-hover';
    var tbody = document.createElement('tbody');
    legendTable.append(tbody);

    var head = document.createElement('tr');
    head.append(TableParser.createTH("#"));
    head.append(TableParser.createTH("图例"));
    tbody.append(head);
    
    for(var i = 0; i < this._legends.length; i++){
        var tr = document.createElement('tr');
        tr.append(TableParser.createTD(i));
        tr.append(TableParser.createTD(this._legends[i]));
        tbody.append(tr);
    }

    this._legendTB = legendTable;

    info.append(legendTable);

    //! Content table
    var contentTable = document.createElement('table');
    contentTable.className = 'table table-hover';
    var tbody = document.createElement('tbody');
    contentTable.append(tbody);

    var head = document.createElement('tr');
    head.append(TableParser.createTH("#"));
    head.append(TableParser.createTH("结构"));
    head.append(TableParser.createTH("图例"));
    head.append(TableParser.createTH("内容"));
    tbody.append(head);
    
    for(var i = 0; i < this._contents.length; i++){
        var tr = document.createElement('tr');
        tr.col = this._contents[i].colIndex;
        tr.row = this._contents[i].rowIndex;
        tr.append(TableParser.createTD(i));
        tr.append(TableParser.createTD(this._contents[i].struct));
        tr.append(TableParser.createTD(this._contents[i].legend));
        tr.append(TableParser.createTD(this._contents[i].value));
        tr.onclick = this.onContentTBclick.bind(this);
        tbody.append(tr);
    }

    this._contentTB = contentTable;

    info.append(contentTable);

    this._baseElement.append(info);

    this.showInfoTable('stct');
}

TableParser.prototype.onRawTBclick = function(e){
    TableParser.clearTable(this._table);
    e.target.style.color = 'red';
    var trs = this._contentTB.getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++){
        var children = trs[i].children;
        if (children[1].innerText == e.target.struct && children[2].innerText == e.target.legend && children[3].innerText == e.target.innerText){
            trs[i].className = 'danger';
        }
        else{
            trs[i].className = '';
        }
    }
}

TableParser.prototype.onContentTBclick = function(e){
    TableParser.clearRowTable(this._contentTB);
    TableParser.clearTable(this._table);
    var colIndex = e.target.parentElement.col;
    var rowIndex = e.target.parentElement.row;
    var tr = e.target.parentElement;
    tr.className = 'danger';
    var trs = this._table.getElementsByTagName('tr');
    var row = trs[rowIndex];
    row.children[colIndex].style.color = 'red';
}

TableParser.prototype.showInfoTable = function(e){
    var tbType = '';
    if (e.target){
        tbType = e.target.parentElement.tbType;
        var lis = e.target.parentElement.parentElement.children;
        for (var i = 0; i < lis.length; i++){
            lis[i].className = '';
        }
        e.target.parentElement.className = 'active';
    }
    else{
        tbType = e;
    }
    // this._metaTB.style.display = 'none';
    this._structTB.style.display = 'none';
    this._legendTB.style.display = 'none';
    this._contentTB.style.display = 'none';
    this._featureTB.style.display = 'none';
    if (tbType == 'stct'){
        this._structTB.style.display = '';
    }
    else if (tbType == 'lgd'){
        this._legendTB.style.display = '';
    }
    else if (tbType == 'ctnt'){
        this._contentTB.style.display = '';
    }
    // else if (tbType == 'mt'){
    //     this._metaTB.style.display = '';
    // }
    else if (tbType == 'f'){
        this._featureTB.style.display = '';
    }
}

TableParser.createTD = function(value){
    var td = document.createElement('td');
    // td.style.border = '#000000 1px solid';
    td.innerText = value;
    return td;
}

TableParser.createTH = function(value){
    var td = document.createElement('th');
    // td.style.border = '#000000 1px solid';
    td.innerText = value;
    return td;
}

TableParser.clearTable = function(tb){
    var trs = tb.getElementsByTagName('tr');
    for(var i = 0; i < trs.length; i++){
        var children = trs[i].children;
        trs[i].style.color = 'black';
        for (var j = 0; j < children.length; j++){
            children[j].style.color = 'black';
        }
    }
}

TableParser.clearRowTable = function(tb){
    var trs = tb.getElementsByTagName('tr');
    for(var i = 0; i < trs.length; i++){
        trs[i].className = ''
    }
}